<template>
  <div class="mod-config">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <!-- <el-form-item>
        <el-input v-model="dataForm.certificateNumber" placeholder="证件号" clearable></el-input>
      </el-form-item> -->

      <el-form-item>
        <label>关键字
          <el-tooltip class="item" effect="dark" content="支持搜索姓名,手机号,证件号查询" placement="top-start">
            <i class="el-icon-warning"> </i>
          </el-tooltip></label>
        <el-input v-model="dataForm.key" placeholder="请输入关键字查询" style="width: 200px;" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
        <el-button v-if="isAuth('hotel:tguestcalendar:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
        <el-button v-if="isAuth('hotel:tguestcalendar:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
      </el-form-item>

      <el-form-item style="float: right;" label="" v-if="isAuth('hotel:hotelseller:list')">
        <selectSeller @change="selectSellerChange"></selectSeller>
      </el-form-item>

    </el-form>
    <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
      <el-table-column type="selection" header-align="center" align="center" width="50">
      </el-table-column>
      <el-table-column prop="name" header-align="center" align="center" label="姓名">
      </el-table-column>
      <el-table-column prop="sex" header-align="center" align="center" label="性别">
        <template slot-scope="scope">
          <label v-if="scope.row.sex==1">男</label>
          <label v-if="scope.row.sex==2">女</label>
        </template>
      </el-table-column>

      <el-table-column prop="phone" header-align="center" align="center" label="联系方式">
      </el-table-column>
      <el-table-column prop="label" header-align="center" align="center" label="证件类型">
      </el-table-column>
      <el-table-column prop="certificateNumber" header-align="center" align="center" label="证件号">
      </el-table-column>
      <el-table-column prop="cardNo" header-align="center" align="center" label="会员卡号">
      </el-table-column>
      <el-table-column prop="memberName" header-align="center" align="center" label="会员级别">
      </el-table-column>
      <el-table-column prop="checkTime" header-align="center" align="center" label="首次入住日期">
      </el-table-column>
      <el-table-column prop="ldTime" header-align="center" align="center" label="最后离店日期">
      </el-table-column>
      <el-table-column prop="roomsum" header-align="center" align="center" label="最后结账房号">
      </el-table-column>
      <el-table-column prop="cumulativenumber" header-align="center" align="center" label="累计间夜数">
      </el-table-column>
      <el-table-column prop="cumulativemoney" header-align="center" align="center" label="累计消费金额">
      </el-table-column>
      <el-table-column prop="number" header-align="center" align="center" label="入住次数">
      </el-table-column>

      <el-table-column prop="userStatus" header-align="center" align="center" label="黑名单">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="showremake(scope.row)">{{mdTypeMap[scope.row.userStatus]}}</el-button>
        </template>
      </el-table-column>
      <!--      <el-table-column
        prop="remakeyy"
        header-align="center"
        align="center"
        label="原因">
        <template slot-scope="scope">
        	 <span v-if="scope.row.userStatus==0">{{scope.row.remakeyy}}</span>
        </template>
      </el-table-column> -->



      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
        <template slot-scope="scope">
          <el-button v-if="scope.row.cardNo==''||scope.row.cardNo==null" type="text" size="small" @click="registerCardHandler(scope.row)">办卡</el-button>
          <el-button type="text" size="small" @click="ruzhu(scope.row)">入住记录</el-button>
          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
          <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    <!--    <el-dialog
      title="办卡"
      :visible.sync="UpdateVisible"
       v-if="UpdateVisible"
    >
    <addOrmemberUpdate ref="UpdateVisible" @refreshDataList="getDataList" :retruenRen="clearreturn" :rows="rows"></addOrmemberUpdate>
   </el-dialog> -->
    <addOrUpdates v-if="UpdateVisible" ref="addOrUpdates" @refreshDataList="getDataList"></addOrUpdates>
    <el-dialog title="入住记录" :visible.sync="showruzhu" v-if="showruzhu">
      <guestlist :tguesid="rows.id"></guestlist>

    </el-dialog>

    <el-dialog title="原因" :visible.sync="showloa" v-if="showloa" width="30%">
      <el-input v-model="item.remakeyy" placeholder="原因"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showloa = false">取消</el-button>
        <el-button type="primary" @click="updateStatus(item)">确定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import AddOrUpdate from './tguestcalendar-add-or-update'
  import addOrmemberUpdate from './hotelmemberleveldetail-add-or-update';
  import guestlist from './guestlist.vue';
  import addOrUpdates from '../sellerMember/hotelmemberleveldetail-add-or-update.vue'
  export default {
    data() {
      return {
        dataForm: {
          sellerIds: [],
          key: ''
        },
        rows: {},
        mdTypeMap: {
          0: '黑名单',
          1: '白名单'
        },
        dataList: [],
        dataForms: {},
        platformSeller: [],
        sellerIds: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        showruzhu: false,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        UpdateVisible: false,
        showloa: false,
        item: {}
      }
    },
    components: {
      AddOrUpdate,
      addOrmemberUpdate,
      guestlist,
      addOrUpdates
    },
    activated() {
      this.getDataList()
    },
    methods: {
      selectSellerChange(val) {
        console.log("接收值", val);
        this.sellerIds = val;
        this.getDataList();
      },
      showremake(item) {
        this.item = item;
        if (item.userStatus == '1') {

          this.showloa = true;
        } else {
          item.userStatus = '0';
          this.updateStatus(item);
        }

      },
      selectSeller(id, value) {
        this.getDataList()
      },

      ruzhu(row) {

        this.rows = row;
        this.showruzhu = true;
      },
      clearreturn() {
        this.UpdateVisible = false;
        this.getDataList();
      },
      registerCardHandler(row) {
        this.dataForms = {};
        this.dataForms.name = row.name;
        this.dataForms.gender = row.sex
        this.dataForms.certificate = row.type
        this.dataForms.certificateNo = row.certificateNumber
        this.dataForms.mobile = row.phone
        this.dataForms.address = row.address
        this.dataForms.tguestId = row.id
        this.UpdateVisible = true;
        this.$nextTick(() => {
          this.$refs.addOrUpdates.init(this.dataForms);
        });
      },
      updateStatus(item) {
        this.$http({
          url: this.$http.adornUrl("/hotel/tguestcalendar/updateBYid"),
          method: "post",
          data: item
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.getDataList();
                this.showloa = false;
              }
            });
          } else {
            this.$message.error(data.msg);
          }
          this.getDataList();
        });
      },
      // 获取数据列表
      getDataList() {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/hotel/tguestcalendar/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'key': this.dataForm.key,
            'sellerIds': this.sellerIds.join(",")
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {

            this.dataList = data.page.list
            this.totalPage = data.page.sizes
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle(val) {
        this.dataListSelections = val
      },
      // 新增 / 修改
      addOrUpdateHandle(id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      // 删除
      deleteHandle(id) {
        var ids = id ? [id] : this.dataListSelections.map(item => {
          return item.id
        })
        this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/hotel/tguestcalendar/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({
            data
          }) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .el-dialog__wrapper /deep/ .el-dialog {
    width: 60%;

    .el-dialog__body .el-form {
      display: flex;
      flex-wrap: wrap;

      >div {
        width: 50%;
      }

      >div:nth-child(1) {
        width: 100%;
      }
    }
  }

  @media only screen and (max-width: 1180px) {
    .el-dialog__wrapper /deep/ .el-dialog {
      width: 100%;
    }
  }
</style>
